<template>
	<view class="">
		<view class="img">
			<image class="tu" mode="widthFix" src="/static/image/tu.png" />

			<view class="xuanfu">
				<view class="fu1" @click="showrules">规则</view>
				<view class="fu1" @click="showjianli">奖励</view>
			</view>

			<view class="po poboxs">
				<!-- <view class="titles">
					<image class="fanhui" mode="widthFix" src="../assets/image/fanhui.png" />
					<view class="mingxi">分享海报</view>
				</view> -->
				<view class="container">
					<!-- 轮播图区域 -->
					<view class="swiper-container">
						<swiper :current="current" @change="swiperChange" :style="{ height: '1080upx' }"
							:circular="true" previous-margin="0upx" next-margin="200upx">
							<swiper-item v-for="(item, index) in swiperList" :key="index">
								<view class="swiper-item" :class="{ active: current === index }"
									@click="handleSwiperClick(index)">
									<view class="imgbox">
										<view class="lunbo">
											<view class="boxss">
												<image class="imgs" :src="item.image"></image>
												<view class="titleszi">
													<view class="linesa">
														<view class="ttf">
															扫描二维码 | 分享得红包
														</view>
														<view class="ttf">
															分享给好友+朋友圈
														</view>
													</view>
													<view class="erweima">
														<!-- 这个是二维码图片 点击二维码下载得时候 就是下载这个 -->
														<image class="erweimaimg" mode="widthFix" :src="erweima" />
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>

					</view>
				</view>
			</view>
		</view>
		<view class="zuoyou">
			<img class="shouzhi" src="./shouzhi.png" />
			左右滑动分享海报
		</view>
		<shares @downloadQRCode="downloadQRCode" @save="save"></shares>
		<uni-popup ref="popup" background-color="#fff" mask-click=false>
			<view class="popup-content">
				<view style="width:100%;text-align: center;">
					活动规则
				</view>
				<view class="text">规则说明</view>
				<view class="text">1、通过分享链接或图片二维码邀请朋友绑定关系并完成下单;</view>
				<view class="text">2、邀请成功后，好友每次完成订单你都可以拿到佣金，好友完成订单的次数越多你能获得佣金也越多 ;</view>
				<view class="text">3、若被邀请者是新用户，则24个月内其每次完成订单72h后你都可以获得返点5%佣金;</view>
				<view class="text">4、邀请朋友成为技师(同上)服务所得的5％佣金提奖;</view>
				<view class="text">5、若被邀请者订单完单后72h内发生了退款，则奖励不再下发;</view>
				<view class="text">6、每个用户只能绑定一个邀请人;</view>
				<view class="text">7、用户通过邀请获得的佣金奖励，可以提现至支付宝或钱包余额下单时使用;</view>
				<view class="text">
					8、用户不得采取任何不正当或作弊的违规手段参与本活动，一经发现，本产品有权限制或取消用户参与活动的资格，有权取消奖励、追讨用户已领取的奖励(或同等价值的现金)。本产品有权对违规用户采取限制登录、封禁帐号的措施，并保留追究用户其他法律责任的权利。;
				</view>
				<view class="text">9、本活动长期有效，最终解释权归本公司所有。</view>
				<view style="width:100%;text-align: center;color:aqua" @click="closeguize">邀请好友下单得更多奖励</view>
			</view>
		</uni-popup>
		<uni-popup ref="jiangli" background-color="#fff" mask-click=false>
			<view class="popup-content">
				<view style="width:100%;text-align: center;">
					奖励
				</view>
				<view class="text">活动奖励问答</view>
				<view class="text">Q：用户先后接受了A和B的邀请，为什么邀请人B没有获得邀请奖励？</view>
				<view class="text">
					A：如果用户在12个月内先收到A的邀请，又收到B的邀请，则用户会和A先进行绑定，A会先收到奖励，并且在绑定有效期期间该用户不会和其它邀请人绑定关系，因此邀请人B无法获得邀请奖励。</view>
				<view class="text">Q：为什么邀请好友后未获得奖励？</view>
				<view class="text">A：被邀请人需要通过您的专属链接注册/登录后下单，订单完单后在72小时内未退款奖励才会到账。</view>
				<view class="text">Q：用户A邀请了用户B，用户B接受了用户A的邀请，用户B邀请了用户C，用户C接受了用户B的邀请，为什么用户A没有获得用户C的下单奖励？</view>
				<view class="text">
					A：因为邀请关系只能建立在两个用户之间，不能进行多级绑定，也就是用户A邀请了用户B，用户B下单则用户A能获得一定的奖励，用户B邀请了用户C，用户C下单则用户B能获得一定的奖励，但用户A和用户C之间并没有邀请关系，因此用户C下单用户A并不会获得奖励。
				</view>
				<view style="width:100%;text-align: center;color:aqua" @click="closejiangli">邀请好友下单得更多奖励</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import shares from "./shares/shares.vue"
	// import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				current: 1, // 当前显示项
				swiperList: [{
						image: 'https://img2.baidu.com/it/u=3946513537,3753906297&fm=253&app=138&f=JPEG?w=800&h=1200',
						title: '图片1'
					},
					{
						image: 'https://img2.baidu.com/it/u=3946513537,3753906297&fm=253&app=138&f=JPEG?w=800&h=1200',
						title: '图片2'
					},
					{
						image: 'https://img2.baidu.com/it/u=3946513537,3753906297&fm=253&app=138&f=JPEG?w=800&h=1200',
						title: '图片3'
					}
				],
				erweima: ''
			}
		},
		components: {
			shares
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			mineInfo: state => state.user.mineInfo,
			wecom_staff: state => state.user.wecom_staff,
		}),
		async onLoad() {
			//从后台获取推广二维码
			var that = this
			await that.gettuiguangQrd()

		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem', 'updateServiceItem', 'updateTechnicianItem', 'updateOrderItem']),
			
			async gettuiguangQrd() {
				var that = this
				let res_data = await this.$api.usernew.gettuiguangQrd()
				that.erweima = res_data
			},
			//显示规则
			showrules() {
				this.$refs.jiangli.close()
				this.$refs.popup.open('center')
			},
			closeguize() {
				this.$refs.popup.close()
			},
			showjianli() {
				this.$refs.popup.close()
				this.$refs.jiangli.open('center')
			},
			closejiangli() {
				this.$refs.jiangli.close()
			},
			async save() {
				try {
					// 给一点延迟确保元素完全渲染
					await new Promise(resolve => setTimeout(resolve, 300));

					const currentIndex = this.current;
					const swiperItems = document.querySelectorAll('.swiper-item');
					const currentItem = swiperItems[currentIndex];
					const lunboElement = currentItem.querySelector('.lunbo');

					// 临时调整元素样式确保完全可见
					const originalStyles = {
						position: lunboElement.style.position,
						zIndex: lunboElement.style.zIndex,
						overflow: lunboElement.style.overflow
					};

					lunboElement.style.position = 'relative';
					lunboElement.style.zIndex = '9999';
					lunboElement.style.overflow = 'visible';

					// 使用html2canvas生成图片
					// const canvas = await html2canvas(lunboElement, {
					// 	backgroundColor: null,
					// 	scale: 2,
					// 	useCORS: true, // 解决跨域图片问题
					// 	allowTaint: true, // 允许跨域图片
					// 	logging: true, // 开启日志调试
					// 	onclone: (clonedDoc) => {
					// 		// 克隆文档时确保图片加载
					// 		const images = clonedDoc.querySelectorAll('img');
					// 		images.forEach(img => {
					// 			img.crossOrigin = 'Anonymous';
					// 		});
					// 	}
					// });

					// 恢复原始样式
					Object.assign(lunboElement.style, originalStyles);

					// 转换为图片
					const imageUrl = canvas.toDataURL('image/png');

					// 创建下载
					this.downloadImage(imageUrl);

				} catch (error) {
					console.error('保存失败:', error);
					uni.showToast({
						title: '保存失败: ' + error.message,
						icon: 'none'
					});
				}
			},
			downloadImage(dataUrl) {
				// 通用下载方法
				const link = document.createElement('a');
				link.href = dataUrl;
				link.download = '分享海报-' + new Date().getTime() + '.png';

				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);

				// 如果是移动端，提示保存方式
				if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
					setTimeout(() => {
						uni.showToast({
							title: '长按图片选择保存到相册',
							icon: 'none',
							duration: 3000
						});
					}, 1000);
				}
			},
			downloadQRCode() {

				//替换成真实得二维码
				const qrCodeUrl = this.erweima;

				// 创建隐藏的下载链接
				const link = document.createElement('a');
				link.href = qrCodeUrl;
				link.download = 'my-qrcode.jpg'; // 设置下载文件名

				// 触发点击
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);

				// 移动端提示
				if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
					uni.showToast({
						title: '长按图片保存到相册',
						icon: 'none'
					});
				}
			},
			// 轮播图切换事件
			swiperChange(e) {
				this.current = e.detail.current;
			},
			// 点击轮播图
			handleSwiperClick(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.poboxs {
		padding-top: 150upx;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		// height: 50px;
		width: 600rpx;
		height: 1200rpx;
		background-color: #fff;
	}

	.popup-contentjiangli {
		align-items: center;
		justify-content: center;
		padding: 15px;
		// height: 50px;
		width: 600rpx;
		height: 900rpx;
		background-color: #fff;
	}

	.shouzhi {
		width: 32upx;
		height: 32upx;
		font-size: 26upx;
		color: #FF9626;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		margin-right: 2upx;
	}

	.zuoyou {
		display: flex;
		justify-content: center;
		justify-items: center;
		color: #FF9626;
		line-height: 52upx;
		width: 380upx;
		height: 52upx;
		background: #FFEFE0;
		border-radius: 8upx 8upx 8upx 8upx;
		margin: 0 auto;
	}

	.xuanfu {
		position: fixed;
		left: 0;
		top: 220upx;
		z-index: 999;
	}

	.xuanfu view:nth-child(1) {
		width: 112upx;
		line-height: 52upx;
		height: 52upx;
		background: linear-gradient(180deg, #7BF8EE 0%, #A9FFD9 100%);
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		text-align: center;
		font-size: 24upx;
		color: #08693D;
	}

	.xuanfu view:nth-child(2) {
		width: 112upx;
		height: 52upx;
		line-height: 52upx;
		background: linear-gradient(180deg, #7BF8EE 0%, #A9FFD9 100%);
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		text-align: center;
		margin-top: 20upx;
		font-size: 24upx;
		color: #08693D;
	}

	.erweima {
		border: solid 1px rgb(12, 173, 125);
		padding: 6upx;
		float: right;
		margin-top: 2upx;
		transform: translateY(5%)
	}

	.erweimaimg {
		width: 5VH;
		display: block;
		width: 5VH
	}

	.linesa {
		color: rgb(12, 173, 125);
		float: left;
		line-height: 40upx;
		font-size: 25upx;
	}

	// @font-face {
	// 	font-family: 'ttf';
	// 	src: url("/static/font/ttf.ttf");
	// }

	.ttf {
		font-family: "ttf";
	}

	.mingxi {
		text-align: center;
		color: #171725;
	}

	.fanhui {
		position: absolute;
		left: 50upx;
		line-height: 140upx;
		top: 50%;
		transform: translateY(-50%);
		width: 88upx;
	}

	.titles {
		height: 140upx;
		line-height: 140upx;
		position: relative;
	}

	.tu {
		width: 100%;
	}

	body {
		background: #F6F6F6;
		min-height: 100vh;
	}

	.img {
		width: 100%;
		height: 1080upx;
		display: block;
		position: relative;
	}

	.po {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.lianjie {
		width: 300upx;
		text-align: center;
		color: rgb(255, 255, 255);
		background: rgb(38, 121, 255);
		border-radius: 40upx;
		height: 70upx;
		line-height: 70upx;
		margin-top: 30upx;
	}

	.savebtn {
		width: 300upx;
		text-align: center;
		color: rgb(255, 89, 0);
		background: rgba(255, 94, 0, 0.2);
		border-radius: 10upx;
		height: 70upx;
		line-height: 70upx;
	}

	.titleszi {
		width: 100%;
		height: 140upx;
		padding: 0 20upx;
		padding-top: 20upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
		background: white;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
	}

	.boxss {
		width: 100%;
		border-radius: 20upx;
		box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.4);
	}

	.tt {
		float: left;
		line-height: 80upx;
	}

	.erweima {
		// width: 80upx;
		float: right;
	}

	.imgs {
		width: 452upx;
		display: block;
		height: 710upx;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
	}

	.imgbox {
		width: 100%;
		height: 100%;
		padding-bottom: 20upx;
		position: relative;
	}

	.container {
		padding: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0upx;
		padding-top: 20upx;
	}

	.swiper-container {
		width: 100%;
		position: relative;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		transition: all 0.3s ease;
		padding: 20upx;
		transform: scale(0.95);
	}

	.swiper-image {
		border-radius: 20upx;
		box-shadow: 0 10upx 30upx rgba(0, 0, 0, 0.2);
		transition: all 0.3s ease;
	}

	.swiper-title {
		margin-top: 30upx;
		font-size: 32upx;
		color: #333;
	}

	.indicator {
		display: flex;
		justify-content: center;
		margin-top: 40upx;
	}

	.indicator-dot {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background-color: #ccc;
		margin: 0 10upx;
		transition: all 0.3s ease;

	}

	.active {
		transform: scale(1);
	}
</style>